import { createElement, useEffect, useState } from "react";
// createBrowserHistory,
// , HashHistory
import { createBrowserHistory } from "history";
import { Router } from "react-router-dom";
export const history = createBrowserHistory();
type Children = React.ReactElement<
	any,
	string | React.JSXElementConstructor<any>
> | null;
interface HistoryRouterProps {
	history: typeof history;
	children: Children;
}
export const HistoryRouter: React.FC<HistoryRouterProps> = ({
	history,
	children,
}) => {
	// console.log('history', history)
	// console.log('children', children)
	const [state, setState] = useState({
		action: history.action,
		location: history.location,
	});
	useEffect(() => {
		history.listen(setState);
	}, [history]);
	return createElement(
		Router,
		Object.assign({ children, navigator: history }, state)
	);
};
